<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">员工管理</div>
            
            <!-- 员工概览 -->
            <div class="employee-overview">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card class="overview-card total">
                            <div class="overview-item">
                                <div class="overview-number">{{ employeeStats.total }}</div>
                                <div class="overview-label">员工总数</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card active">
                            <div class="overview-item">
                                <div class="overview-number">{{ employeeStats.active }}</div>
                                <div class="overview-label">在职员工</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card drivers">
                            <div class="overview-item">
                                <div class="overview-number">{{ employeeStats.drivers }}</div>
                                <div class="overview-label">司机</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card warehouse">
                            <div class="overview-item">
                                <div class="overview-number">{{ employeeStats.warehouse }}</div>
                                <div class="overview-label">仓储人员</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 功能选项卡 -->
            <el-tabs v-model="activeTab">
                <el-tab-pane label="员工档案" name="employee-profile">
                    <div class="employee-section">
                        <div class="query-tools">
                            <el-row :gutter="15">
                                <el-col :span="6">
                                    <el-input v-model="employeeQuery.name" placeholder="员工姓名" clearable></el-input>
                                </el-col>
                                <el-col :span="6">
                                    <el-select v-model="employeeQuery.department" placeholder="部门" clearable>
                                        <el-option label="运输部" value="transport"></el-option>
                                        <el-option label="仓储部" value="warehouse"></el-option>
                                        <el-option label="管理部" value="management"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-select v-model="employeeQuery.status" placeholder="状态" clearable>
                                        <el-option label="在职" value="active"></el-option>
                                        <el-option label="离职" value="inactive"></el-option>
                                        <el-option label="试用期" value="probation"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-button type="primary" @click="searchEmployees">查询</el-button>
                                    <el-button @click="resetEmployeeQuery">重置</el-button>
                                    <el-button type="success" @click="addEmployee">新增员工</el-button>
                                </el-col>
                            </el-row>
                        </div>

                        <el-table :data="employeeData" border style="width: 100%; margin-top: 20px;">
                            <el-table-column prop="employeeId" label="工号" width="100"></el-table-column>
                            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                            <el-table-column prop="department" label="部门" width="120"></el-table-column>
                            <el-table-column prop="position" label="职位" width="150"></el-table-column>
                            <el-table-column prop="phone" label="联系电话" width="130"></el-table-column>
                            <el-table-column prop="hireDate" label="入职日期" width="120"></el-table-column>
                            <el-table-column prop="status" label="状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="getEmployeeStatusType(scope.row.status)">
                                        {{ getEmployeeStatusText(scope.row.status) }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="viewEmployeeDetail(scope.row)">详情</el-button>
                                    <el-button size="mini" type="primary" @click="editEmployee(scope.row)">编辑</el-button>
                                    <el-dropdown trigger="click">
                                        <el-button size="mini">
                                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                                        </el-button>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item @click.native="transferEmployee(scope.row)">调岗</el-dropdown-item>
                                            <el-dropdown-item @click.native="promoteEmployee(scope.row)">晋升</el-dropdown-item>
                                            <el-dropdown-item @click.native="suspendEmployee(scope.row)" divided>停职</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="考勤管理" name="attendance">
                    <div class="attendance-section">
                        <div class="attendance-stats">
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <div class="attendance-card">
                                        <div class="attendance-number">{{ attendanceStats.present }}</div>
                                        <div class="attendance-label">今日出勤</div>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="attendance-card">
                                        <div class="attendance-number">{{ attendanceStats.late }}</div>
                                        <div class="attendance-label">迟到人数</div>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="attendance-card">
                                        <div class="attendance-number">{{ attendanceStats.leave }}</div>
                                        <div class="attendance-label">请假人数</div>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="attendance-card">
                                        <div class="attendance-number">{{ attendanceStats.absent }}</div>
                                        <div class="attendance-label">缺勤人数</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>

                        <el-table :data="attendanceData" border style="width: 100%; margin-top: 20px;">
                            <el-table-column prop="employeeName" label="员工姓名" width="120"></el-table-column>
                            <el-table-column prop="department" label="部门" width="120"></el-table-column>
                            <el-table-column prop="checkInTime" label="签到时间" width="150"></el-table-column>
                            <el-table-column prop="checkOutTime" label="签退时间" width="150"></el-table-column>
                            <el-table-column prop="workHours" label="工作时长" width="120"></el-table-column>
                            <el-table-column prop="attendanceStatus" label="考勤状态" width="120">
                                <template slot-scope="scope">
                                    <el-tag :type="getAttendanceStatusType(scope.row.attendanceStatus)">
                                        {{ scope.row.attendanceStatus }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="150">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="adjustAttendance(scope.row)">调整</el-button>
                                    <el-button size="mini" type="primary" @click="viewAttendanceDetail(scope.row)">详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="培训记录" name="training">
                    <div class="training-section">
                        <div class="training-tools">
                            <el-button type="primary" @click="createTraining">创建培训</el-button>
                            <el-button type="success" @click="importTrainingRecords">导入记录</el-button>
                            <el-button @click="exportTrainingRecords">导出记录</el-button>
                        </div>

                        <el-table :data="trainingData" border style="width: 100%; margin-top: 20px;">
                            <el-table-column prop="trainingName" label="培训名称" width="200"></el-table-column>
                            <el-table-column prop="trainingType" label="培训类型" width="120">
                                <template slot-scope="scope">
                                    <el-tag :type="getTrainingTypeColor(scope.row.trainingType)">
                                        {{ scope.row.trainingType }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="trainer" label="培训师" width="120"></el-table-column>
                            <el-table-column prop="trainingDate" label="培训日期" width="120"></el-table-column>
                            <el-table-column prop="participants" label="参训人数" width="100"></el-table-column>
                            <el-table-column prop="passRate" label="通过率" width="100">
                                <template slot-scope="scope">
                                    <span :style="{color: scope.row.passRate >= 80 ? '#67C23A' : scope.row.passRate >= 60 ? '#E6A23C' : '#F56C6C'}">
                                        {{ scope.row.passRate }}%
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="getTrainingStatusType(scope.row.status)">
                                        {{ scope.row.status }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="viewTrainingDetail(scope.row)">详情</el-button>
                                    <el-button size="mini" type="primary" @click="editTraining(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="success" @click="exportCertificate(scope.row)">证书</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'employee-profile',
                    employeeStats: {
                        total: 156,
                        active: 148,
                        drivers: 68,
                        warehouse: 45
                    },
                    employeeQuery: {
                        name: '',
                        department: '',
                        status: ''
                    },
                    employeeData: [
                        {
                            employeeId: 'EMP001',
                            name: '张三',
                            department: '运输部',
                            position: '高级司机',
                            phone: '13800138001',
                            hireDate: '2020-03-15',
                            status: 'active'
                        },
                        {
                            employeeId: 'EMP002',
                            name: '李四',
                            department: '仓储部',
                            position: '仓库管理员',
                            phone: '13800138002',
                            hireDate: '2021-06-20',
                            status: 'active'
                        },
                        {
                            employeeId: 'EMP003',
                            name: '王五',
                            department: '管理部',
                            position: '调度员',
                            phone: '13800138003',
                            hireDate: '2023-12-01',
                            status: 'probation'
                        }
                    ],
                    attendanceStats: {
                        present: 142,
                        late: 6,
                        leave: 8,
                        absent: 2
                    },
                    attendanceData: [
                        {
                            employeeName: '张三',
                            department: '运输部',
                            checkInTime: '2024-01-16 08:30',
                            checkOutTime: '2024-01-16 18:00',
                            workHours: '9.5小时',
                            attendanceStatus: '正常'
                        },
                        {
                            employeeName: '李四',
                            department: '仓储部',
                            checkInTime: '2024-01-16 09:15',
                            checkOutTime: '2024-01-16 18:30',
                            workHours: '9.25小时',
                            attendanceStatus: '迟到'
                        }
                    ],
                    trainingData: [
                        {
                            trainingName: '冷链运输安全操作规范',
                            trainingType: '安全培训',
                            trainer: '王教练',
                            trainingDate: '2024-01-10',
                            participants: 25,
                            passRate: 92,
                            status: '已完成'
                        },
                        {
                            trainingName: '仓储设备操作培训',
                            trainingType: '技能培训',
                            trainer: '李工程师',
                            trainingDate: '2024-01-08',
                            participants: 18,
                            passRate: 78,
                            status: '进行中'
                        }
                    ]
                }
            },
            methods: {
                getEmployeeStatusType(status) {
                    const typeMap = {
                        'active': 'success',
                        'inactive': 'danger',
                        'probation': 'warning'
                    };
                    return typeMap[status] || 'info';
                },
                getEmployeeStatusText(status) {
                    const textMap = {
                        'active': '在职',
                        'inactive': '离职',
                        'probation': '试用期'
                    };
                    return textMap[status] || '未知';
                },
                getAttendanceStatusType(status) {
                    const typeMap = {
                        '正常': 'success',
                        '迟到': 'warning',
                        '早退': 'warning',
                        '缺勤': 'danger',
                        '请假': 'info'
                    };
                    return typeMap[status] || 'info';
                },
                getTrainingTypeColor(type) {
                    const typeMap = {
                        '安全培训': 'danger',
                        '技能培训': 'primary',
                        '管理培训': 'success',
                        '合规培训': 'warning'
                    };
                    return typeMap[type] || 'info';
                },
                getTrainingStatusType(status) {
                    const typeMap = {
                        '计划中': 'info',
                        '进行中': 'warning',
                        '已完成': 'success',
                        '已取消': 'danger'
                    };
                    return typeMap[status] || 'info';
                },
                searchEmployees() {
                    this.$message.success('查询完成');
                },
                resetEmployeeQuery() {
                    this.employeeQuery = { name: '', department: '', status: '' };
                },
                addEmployee() {
                    this.$message.info('新增员工功能开发中');
                },
                viewEmployeeDetail(row) {
                    this.$message.info('查看员工详情功能开发中');
                },
                editEmployee(row) {
                    this.$message.info('编辑员工功能开发中');
                },
                transferEmployee(row) {
                    this.$message.info('员工调岗功能开发中');
                },
                promoteEmployee(row) {
                    this.$message.info('员工晋升功能开发中');
                },
                suspendEmployee(row) {
                    this.$confirm('确认停职员工 ' + row.name + '？', '停职确认').then(() => {
                        this.$message.warning('员工已停职');
                    });
                },
                adjustAttendance(row) {
                    this.$message.info('调整考勤功能开发中');
                },
                viewAttendanceDetail(row) {
                    this.$message.info('查看考勤详情功能开发中');
                },
                createTraining() {
                    this.$message.info('创建培训功能开发中');
                },
                importTrainingRecords() {
                    this.$message.info('导入培训记录功能开发中');
                },
                exportTrainingRecords() {
                    this.$message.success('培训记录导出成功');
                },
                viewTrainingDetail(row) {
                    this.$message.info('查看培训详情功能开发中');
                },
                editTraining(row) {
                    this.$message.info('编辑培训功能开发中');
                },
                exportCertificate(row) {
                    this.$message.success('培训证书导出成功');
                }
            }
        });
    </script>

    <style scoped>
        .employee-overview {
            margin-bottom: 30px;
        }
        
        .overview-card {
            text-align: center;
            transition: all 0.3s;
        }
        
        .overview-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .overview-card.total {
            border-left: 4px solid #409EFF;
        }
        
        .overview-card.active {
            border-left: 4px solid #67C23A;
        }
        
        .overview-card.drivers {
            border-left: 4px solid #E6A23C;
        }
        
        .overview-card.warehouse {
            border-left: 4px solid #F56C6C;
        }
        
        .overview-number {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
        }
        
        .overview-label {
            color: #606266;
            margin: 8px 0;
        }
        
        .employee-section, .attendance-section, .training-section {
            margin-bottom: 20px;
        }
        
        .query-tools, .training-tools {
            margin-bottom: 20px;
        }
        
        .training-tools .el-button {
            margin-right: 10px;
        }
        
        .attendance-stats {
            margin-bottom: 30px;
        }
        
        .attendance-card {
            text-align: center;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #409EFF;
        }
        
        .attendance-number {
            font-size: 24px;
            font-weight: bold;
            color: #409EFF;
            margin-bottom: 8px;
        }
        
        .attendance-label {
            color: #666;
        }
    </style>
</body>
</html>